<template>
    <view class="BpmMyEventsTemplate">
        <view v-if="conf.configuration !='classify'">
            <uv-tabs style="margin-bottom: 0.5rem" :list="tabsList" :current="current" @change="TabChange"></uv-tabs>
        </view>
        <view class="rx-top">
            <view class='search_text'><span class='BpmMyEventsHead_title'>{{$ti18('rxList.title','标题')}}:</span><input
                v-model="title" :placeholder="$ti18('rxList.title','请输入标题','','input')" />
            </view>
            <view v-if="current!=3" class='search_text'><span class='BpmMyEventsHead_title'>{{i18n('orderNumber','业务单号')}}:</span><input
                v-model="businessId" :placeholder="i18n('orderNumber','请输入业务单号','input')" /></view>
            <view @click="search" class='setProcess_btn '>{{$ti18('rxList.searchBtn', '查询')}}</view>
        </view>
        <view class="rx-center">
            <view class="BpmMyEventsContent ">
                <BpmMyEventsList @change="change" :ProcessList="ProcessList" :conf="conf"></BpmMyEventsList>
                <view class="sub-empty" v-if="ProcessList.length==0">
                    <image class="sub-empty-img" src="@/static/empty.png"/>
                    <span class="sub-empty-name">{{$ti18('rxList.noDataNow','暂无数据')}}</span>
                </view>
                <div @click='loadclick' v-if="status=='more'" class='more-btn'>{{$ti18('rxList.clickLoadMore','点击加载更多')}}</div>
            </view>
        </view>
        <view class='bottom-operation-btn'>
            <view  @click="cancel" class='bottom-operation'>{{$ti18('rxForm.closeBtn','关闭')}}</view>
            <view class="bottom-operation" @click="confirm" >{{$ti18('rxForm.okBtn','确定')}}</view>
        </view>
    </view>
</template>

<script>
import BpmMyEventsList from './BpmMyEventsList.vue';
import Api from "@/api/Api.js"
export default {
    name: "rx-relate-process",
    data() {
        return {
            myReceiveTurnParam: {},
            ProcessList: [], //流程列表
            Selected: [], //选中那条流程
            pageSize: 20,
            pageNo: 1,
            total: 0,
            status: 'more',
            contentText: {
                contentdown: this.i18n('loadMore', '上拉加载更多'),
                contentrefresh: this.i18n('loading', '加载中'),
                contentnomore: this.$ti18('rxList.noMore', '没有更多')
            },
            tabsList: [{
                name: this.i18n('myStartTable', '我的申请'),
            }, {
                name: this.i18n('myTasks', '我的待办'),
            }, {
                name: this.i18n('myApproveTable', '我的已办'),
            }, {
                name: this.i18n('myReceiveTurn', '我收到的转发'),
            }],
            current: 0,
            loaded: 'myStartTable',
            showLoading: false,
            title:'',//标题
            businessId:'',//业务单号
        }
    },
    components: {
        BpmMyEventsList
    },
    props: {
        conf: '',
    },
    created() {
        if (this.conf.processClassification && this.conf.processClassification.pkid) {
            this.loaded = 'myClassify'
        }
    },
    mounted() {
        this.loadList(true, false);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        TabChange(e) {
            this.current = e.index;
            switch (e.index) {
                case 0:
                    this.loaded = 'myStartTable';
                    this.loadList(true, false)
                    break;
                case 1:
                    this.loaded = 'myTaskTable';
                    this.loadList(true, false)
                    break;
                case 2:
                    this.loaded = 'myApproveTable';
                    this.loadList(true, false)
                    break;
                case 3:
                    this.loaded = 'myReceiveTurnTable';
                    this.loadList(true, false)
                    break;
            }
        },
        // 更多
        loadclick() {
            this.loadList(false, true);
        },
        // 查询
        search() {
            this.loadList(true, false);
        },
        // 确定
        confirm() {
            this.$emit('confirm', this.Selected)
        },
        // 取消
        cancel() {
            this.$emit('cancel')
        },
        //添加流程
        loadList(initPage, merge) {
            this.showLoading = true
            if (initPage) {
                this.pageNo = 1;
            } else {
                let len = this.ProcessList.length;
                if (!len) {
                    this.pageNo == 1;
                } else {
                    this.pageNo = Math.ceil(len / this.pageSize) + 1;
                }
            }
            if (this.total && (this.total <= (this.pageNo - 1) * this.pageSize)) {
                return;
            }
            ;
            this.status = 'more';
            var params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                sortOrder: 'asc',
            }
            let paramsLad={};
            switch (this.loaded) {
                case 'myClassify':
                    if (this.conf.processClassification && this.conf.processClassification.pkid) {
                        paramsLad['Q_i.TREE_ID__S_IN'] = this.conf.processClassification.pkid
                    }
                    paramsLad['Q_i.SUBJECT__S_LK'] = this.title;
                    paramsLad['Q_i.BILL_NO__S_LK']=this.businessId
                    params['params'] = paramsLad
                    Api.bpmInstQuery(params).then(res => {
                        this.splicing(res, merge)
                    })
                    break;
                case 'myStartTable':
                    paramsLad['Q_i.SUBJECT__S_LK'] = this.title;
                    paramsLad['Q_i.BILL_NO__S_EQ']=this.businessId;
                    paramsLad['Q_i.STATUS__S_NEQ']="DRAFTED";
                    params['params'] = paramsLad
                    Api.myBpmInsts(params).then(res => {
                        this.splicing(res, merge)
                    })
                    break;
                case 'myTaskTable':
                    paramsLad['Q_v.SUBJECT__S_LK'] = this.title;
                    paramsLad['Q_v.BILL_NO__S_EQ']=this.businessId;
                    params['params'] = paramsLad
                    Api.myTasks(params).then(res => {
                        this.splicing(res, merge)
                    })
                    break;
                case 'myApproveTable':
                    paramsLad['Q_i.SUBJECT__S_LK'] = this.title;
                    paramsLad['Q_i.BILL_NO__S_EQ']=this.businessId;
                    params['params'] = paramsLad
                    Api.getMyApprovedInsts(params).then(res => {
                        this.splicing(res, merge)
                    })
                    break;
                case 'myReceiveTurnTable':
                    paramsLad['Q_A.SUBJECT__S_LK'] = this.title;
                    params['params'] = paramsLad
                    Api.getMyRecevieTurn(params).then(res => {
                        this.splicing(res, merge)
                    })
                    break;
            }
        },
        // 拼接数据
        splicing(res, merge) {
            this.showLoading = false
            uni.stopPullDownRefresh();
            var data = res.result;
            var list = this.ProcessList;
            this.ProcessList = merge ? [...list, ...data.data] : data.data;
            this.total = data.totalCount;
            if (this.ProcessList.length == this.total) {
                this.status = "noMore"
            }
        },
        // 选择
        change(e) {
            this.Selected = [];
            if (this.conf.mode == 'default') {
                // 单选
                var instId = e.detail.value;
                this.multiple(instId)
            } else {
                for (let obj of e.detail.value) {
                    this.multiple(obj)
                }
            }
        },
        multiple(instId) {
            for (var obj of this.ProcessList) {
                if (obj.instId == instId) {
                    this.Selected.push(obj);
                }
            }
        }
    },
    watch: {}
}
</script>

<style scoped>
.BpmMyEventsTemplate {
    display: flex;
    height: 100%;
    flex-direction: column;
    width: 100%;
    overflow: auto;
}
.rx-top{
    padding: 0.5rem 1rem;
}
.rx-center{
    flex: 1;
    background: rgba(245, 246, 249, 1);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    overflow: auto;
}

.BpmMyEventsContent {
    flex: 1;
    overflow: auto;
}

.search_text {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

.BpmMyEventsHead_title {
    color:rgba(0, 0, 0, 0.85);
    margin-right: 0.5rem;
    min-width: 4rem;
    text-align: right;
}

 .search_text input {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    padding-left: 0.5rem;
     flex: 1;
     height: 2.5rem;
}

.bottom-operation-btn {
    display: flex;
    width: 100%;
    margin: 0.5rem 0rem;
}
.bottom-operation{
    flex: 1;
    height: 2.5rem;
    margin:0rem .5rem ;
    text-align: center;
    line-height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(232, 232, 232, 1);
}
.bottom-operation:last-of-type{
    background: rgba(66, 133, 244, 1);
    color: white;
}
.more-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}
.setProcess_btn {
    color: white;
    background: rgba(66, 133, 244, 1);
    width: 100%;
    margin: auto;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 0.5rem;
}
.sub-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sub-empty-img {
    height: 10rem;
    margin-top: 4rem;
}

.sub-empty-name {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    color: rgba(213, 221, 234, 1);
}
</style>
